<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <title>新增页面</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link
      rel="stylesheet"
      href="/app/admin/component/jsoneditor/css/jsoneditor.css"
    />
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
  </head>
  <body>
    <form class="layui-form" action="">
      <div class="mainBox">
        <div class="main-container mr-5">
          <div class="layui-form-item">
            <label class="layui-form-label required">线路</label>
            <div class="layui-input-block">
              <div name="line_id" id="line_id" required value=""></div>
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label required">地区</label>
            <div class="layui-input-block">
              <div name="region_id" id="region_id" required value=""></div>
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label required">服务器</label>
            <div class="layui-input-block">
              <div name="server_id" id="server_id" required value=""></div>
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label required">ip</label>
            <div class="layui-input-block">
              <textarea name="ip" required lay-verify="required" class="layui-textarea" rows="10" placeholder="请输入节点编号|ip|端口|内网ip 多个换行隔开
例如:
123|127.0.0.1|80|127.0.0.1
456|127.0.0.1|81|(内网ip可选)
456|127.0.0.1|127.0.0.1|(端口可选)"></textarea>
            </div>
          </div>
        </div>
      </div>

      <div class="bottom">
        <div class="button-container">
          <button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">提交</button>
          <button type="reset" class="pear-btn pear-btn-md">重置</button>
        </div>
      </div>
    </form>

    <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <script src="/app/admin/component/jsoneditor/jsoneditor.js"></script>
    <script src="/app/admin/admin/js/permission.js"></script>

    <script>
      // 相关接口
      const PRIMARY_KEY = 'id'
      const INSERT_API = '/app/admin/v1-node-static/insert'

      const getAraes = function (line_id) {
        layer.load()
        layui.$.ajax({
          url: '/app/admin/v1-region/select2?format=tree',
          data: {
            field: PRIMARY_KEY,
            order: 'desc',
            line_id: line_id,
          },
          dataType: 'json',
          success: function (res) {
            let value = layui.$('#region_id').attr('value')
            let initValue = value ? value.split(',') : []
            layui.xmSelect.render({
              el: '#region_id',
              name: 'region_id',
              initValue: initValue,
              filterable: true,
              data: res.data,
              model: { icon: 'hidden', label: { type: 'text' } },
              clickClose: true,
              radio: true,
              layVerify: 'required',
            })
            layer.closeAll('loading')
            if (res.code) {
              layui.popup.failure(res.msg)
            }
          },
        })
      }

      const getLines = function () {
        layui.xmSelect.render({
          el: '#region_id',
          name: 'region_id',
          filterable: false,
          data: [],
          model: { icon: 'hidden', label: { type: 'text' } },
          clickClose: false,
          radio: true,
          layVerify: 'required',
        })

        layui.$.ajax({
          url: '/app/admin/v1-line/select2?format=tree',
          data: {
            field: 'weight',
            order: 'desc',
          },
          dataType: 'json',
          success: function (res) {
            let value = layui.$('#line_id').attr('value')
            let initValue = value ? value.split(',') : []
            layui.xmSelect.render({
              el: '#line_id',
              name: 'line_id',
              initValue: initValue,
              filterable: true,
              data: res.data,
              model: { icon: 'hidden', label: { type: 'text' } },
              clickClose: true,
              radio: true,
              layVerify: 'required',
              on: function (data) {
                layui.xmSelect.render({
                  el: '#region_id',
                  name: 'region_id',
                  filterable: false,
                  initValue: '',
                  data: [],
                  model: { icon: 'hidden', label: { type: 'text' } },
                  clickClose: false,
                  radio: true,
                  layVerify: 'required',
                })

                //arr:  当前多选已选中的数据
                var arr = data.arr
                if (arr.length) {
                  // 查询 area.
                  getAraes(arr[0]['id'])
                }
              },
            })
            if (res.code) {
              layui.popup.failure(res.msg)
            }
          },
        })
      }

      // 字段 线路ID line_id
      layui.use(['jquery', 'xmSelect', 'popup'], function () {
        getLines();
      })

      // 字段 服务器ID server_id
      layui.use(['jquery', 'xmSelect', 'popup'], function () {
        layui.$.ajax({
          url: '/app/admin/v1-server/select2?format=tree',
          data: {
            field: PRIMARY_KEY,
            order: 'desc',
          },
          dataType: 'json',
          success: function (res) {
            let value = layui.$('#server_id').attr('value')
            let initValue = value ? value.split(',') : []
            layui.xmSelect.render({
              el: '#server_id',
              name: 'server_id',
              initValue: initValue,
              filterable: true,
              data: res.data,
              model: { icon: 'hidden', label: { type: 'text' } },
              clickClose: true,
              radio: true,
              layVerify: 'required',
            })
            if (res.code) {
              layui.popup.failure(res.msg)
            }
          },
        })
      })

      //提交事件
      layui.use(['form', 'popup'], function () {
        // 字段验证允许为空
        layui.form.verify({
          phone: [/(^$)|^1\d{10}$/, '请输入正确的手机号'],
          email: [/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, '邮箱格式不正确',],
          url: [/(^$)|(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, '链接格式不正确'],
          number: [/(^$)|^\d+$/, '只能填写数字'],
          date: [/(^$)|^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/, '日期格式不正确',],
          identity: [/(^$)|(^\d{15}$)|(^\d{17}(x|X|\d)$)/, '请输入正确的身份证号',],
        })
        layui.form.on('submit(save)', function (data) {
          layui.$.ajax({
            url: INSERT_API,
            type: 'POST',
            dateType: 'json',
            data: data.field,
            success: function (res) {
              if (res.code) {
                return layui.popup.failure(res.msg)
              }
              return layui.popup.success('操作成功', function () {
                parent.refreshTable()
                parent.layer.close(parent.layer.getFrameIndex(window.name))
              })
            },
          })
          return false
        })
      })
    </script>
  </body>
</html>
